<template>
  <view class="wh_750 pageHeight bg_FFFFFF flex align-center flex-column">
    <s-header-title :title="page.title"
                    is-fixed
                    background="#F5F5F5"
                    is-display-back
                    @getPageHeight="getPageHeight"
    ></s-header-title>
    <view :style="{height:page.headerHeight+'px'}"></view>
    <view class="hW_25"></view>
    <view class="wh_702 bg_F8F8F8"
          style="border-radius: 8rpx"
          :style="{
            height: `calc(70vh - ${page.keyboardHeight}px)`
          }"
    >
      <textarea v-model="page.content"
                class="familyCircleDetails_content_textarea"
                style="white-space: pre-wrap"
                :style="{
                  height:`calc(70vh - 44rpx - ${page.keyboardHeight}px);`
                }"
                :placeholder="`请输入${page.title}`"
                :maxlength="-1"
                :adjust-position="false"
                @keyboardheightchange="textareaKeyboardDidShow"
      ></textarea>
    </view>
    <view class="hW_88"></view>
    <view class="wh_470 hW_80 bg_FF4206 fs_30 fw_500 color_FFFFFF flex align-center justify-center"
          style="border-radius: 41rpx"
          @click.stop="save"
    >
      保存
    </view>
  </view>
</template>

<script setup>
  import { reactive, computed } from 'vue';
  import { onLoad, onUnload, onReady } from '@dcloudio/uni-app';
  import sheep from '@/sheep';

  const page = reactive({
    options: {},
    headerHeight: 0,
    content: '',
    title: '',
    keyboardHeight: 0,
  });

  onLoad(() => {
    let options = uni.getStorageSync('editorCanonization');
    page.options = options;
    if (!!page.options.info.cate_title) {
      page.title = page.options.info.cate_title;
    }
  });


  onReady(async () => {
    const { data } = await sheep.$api.book_list.getBookContent({
      cate_id: page.options.info.cate_id,
    });
    page.content = data.content;
    // #ifndef H5
    // keyboardDidShow();
    // #endif
  });

  function getPageHeight(number) {
    page.headerHeight = number;
  }

  function getTextLength(html) {
    return html.replace(/<(style|script|iframe)[^>]*?>[\s\S]+?<\/\1\s*>/gi, '').replace(/<[^>]+?>/g, '').replace(/\s+/g, ' ').replace(/ /g, ' ').replace(/>/g, ' ');
  }

  async function save() {
    const { code, msg } = await sheep.$api.book_list.updateContent({
      cate_id: page.options.info.cate_id,
      content: page.content,
    });
    if (code == 1) {
      uni.$emit('getCanonizationDetail');
      sheep.$helper.toast('保存成功');
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
    } else {
      sheep.$helper.toast(msg);
    }
  }

  // 监听键盘弹出
  function keyboardDidShow(e) {
    uni.onKeyboardHeightChange((res) => {
      if (res.height > 0) {
        page.keyboardHeight = res.height;
      } else {
        page.keyboardHeight = 0;
      }
    });
  }

  // 输入框键盘弹出事件
  function textareaKeyboardDidShow(e) {
    const res = e.detail;
    if (res.height > 0) {
      page.keyboardHeight = res.height;
    } else {
      page.keyboardHeight = 0;
    }
  }

  onUnload(() => {
    uni.removeStorageSync('editorCanonization');
    uni.offKeyboardHeightChange();
  });
</script>


<style scoped lang="scss">
  .familyCircleDetails_content_textarea {
    margin: 22rpx 20rpx;
    width: 662rpx;
    /* #ifdef H5 */
    min-height: calc(70vh - 44rpx);
    /* #endif */
  }
</style>
